<template>
  <div>
    <el-breadcrumb separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item,index) in leveList" :key="item.path">
          <span v-if="index===leveList.length-1">{{item.title}}</span>
          <a v-else @click.prevent="goToRoter(item)">{{item.title}}</a>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leveList: []
    };
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    }
  },
  mounted() {
    this.getBreadcrumb();
  },
  methods: {
    getBreadcrumb() {
      let list = [];
      this.$route.matched.filter(item => {
        list.push({
          title: item.meta.title,
          path: item.path
        });
      });
      this.leveList = list;
    },
    goToRoter(item) {
      this.$router.push(item.path);
    }
  }
};
</script>
<style lang="scss" scoped>
.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
</style>
